<template>
  <el-table :data="data" row-key="id" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
    <el-table-column prop="paramName" :label="$t('apiList.paramName')">
      <template slot-scope="scope">
        <i :class="{ 'el-icon-menu': scope.row.children && scope.row.children.length, 'el-icon-document': !scope.row.children || scope.row.children.length === 0 }" /><span class="tableName">{{ scope.row.paramName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="dataType" :label="$t('apiList.dataType')" />
    <el-table-column prop="description" :label="$t('apiList.description')" />
    <!-- <el-table-column
      prop="source"
      label="来源"
    />-->
    <el-table-column prop="require" :label="$t('apiList.require')" :formatter="formatterRequire" />
  </el-table>
</template>
<script>
export default {
  name: 'ParamsTable',
  props: {
    data: {
      type: Array,
      default: () => [],
      require: true,
    },
  },
  data: function() {
    return {}
  },
  methods: {
    formatterRequire(row, column, cellValue, index) {
      const require = row.require
      let text = '非必填'
      if (!require) {
        return text
      }
      if (typeof require === 'boolean') {
        text = require
      } else if (typeof require === 'string') {
        if (require === 'true') {
          text = true
        } else if (require === 'false') {
          text = false
        } else {
          return require
        }
      } else {
        text = Boolean(null)
      }
      return text ? '必填' : '非必填'
    },
  },
}
</script>
<style lang="scss" scoped>
.tableName {
  padding: 0 5px;
}
</style>
